<template>
  <div class="left_tabbar">
    <!-- 头像---登录 -->
    <avatarLogin></avatarLogin>

    <!-- 菜单列表 -->
    <div class="menu_list">
      <template v-for="item in optionsStore.menuList" :key="item.id">
        <div
          class="menu_item"
          :class="{ active: activeRoute === item.path }"
          @click="navigateHandler(item.path)"
        >
          <span class="iconfont" :class="item.icon"></span>
          <span class="menu_label">{{ item.label }}</span>
        </div>
      </template>
    </div>
  </div>
</template>

<script setup lang="ts">
import { watch, ref } from 'vue'

import avatarLogin from './avatar-login.vue'

import { useRouter, useRoute } from 'vue-router'

import { useOptions } from '@renderer/pinia/modules/options'

const optionsStore = useOptions()
const router = useRouter()
const route = useRoute()

const activeRoute = ref<string>('/recommed')

// 监听路由变化
watch(
  () => route.meta,
  (value: any) => {
    activeRoute.value = value.path
  },
  {
    immediate: true
  }
)
// 点击导航
const navigateHandler = (path: string) => {
  router.push(path)
}
</script>

<style scoped lang="scss">
.left_tabbar {
  height: 100%;
  width: 100%;
  padding: 25px 10px 0 10px;

  .menu_list {
    padding: 10px;
    .menu_item {
      display: flex;
      align-items: center;
      margin-bottom: 15px;
      padding: 5px 10px;
      cursor: pointer;
      border-radius: 5px;
      .menu_label {
        margin-left: 10px;
      }
      &:hover {
        background-color: var(--ev-active-bgc);
      }
    }

    .active {
      background-color: var(--ev-active-bgc);
    }
  }
}
</style>
